<template>
    <div class="w_h_100">
        <div class="inlet">业务管理 > {{productCategory=='1'?'融资单笔':'非融单笔'}} > {{ nodeCategory == '1' ? '保前' : '保后' }} > <span class="size">查看详情</span></div>
        <div class="index d_f">
            <div class="left">
                <div class="box">
                    <div>客户资料卡</div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">客户名称：</div>
                        <div class="input d_f a_i_c">{{ information.customerName }}
                            <div class="success_status" v-if="information.customerStatus == 0">
                                <img src="../../../assets/normal.png" alt="" class="status_img">
                                <span>正常</span>
                            </div>
                            <div class="success_status" v-if="information.customerStatus == 1">
                                <img src="../../../assets/normal.png" alt="" class="status_img">
                                <span>在途</span>
                            </div>
                            <div class="pause_status" v-if="information.customerStatus == 2">
                                <img src="../../../assets/pause.png" alt="" class="status_img">
                                <span>暂停</span>
                            </div>
                            <div class="settle_status" v-if="information.customerStatus == 3">
                                <img src="../../../assets/settle.png" alt="" class="status_img">
                                <span>结清</span>
                            </div>
                            <div class="settle_status" v-if="information.customerStatus == 4">
                                <img src="../../../assets/settle.png" alt="" class="status_img">
                                <span>解保</span>
                            </div>
                            <div class="abnormal_status" v-if="information.customerStatus == 5">
                                <img src="../../../assets/abnormal.png" alt="" class="status_img">
                                <span>逾期</span>
                            </div>
                            <div class="extension_status" v-if="information.customerStatus == 6">
                                <img src="../../../assets/extension.png" alt="" class="status_img">
                                <span>展期</span>
                            </div>
                            <div class="noRead_status1" v-if="information.customerStatus == 7">
                                <img src="../../../assets/noRead.png" alt="" class="status_img">
                                <span>预警</span>
                            </div>
                            <div class="compensation_status" v-if="information.customerStatus == 8">
                                <img src="../../../assets/compensation.png" alt="" class="status_img">
                                <span>代偿</span>
                            </div>
                        </div>
                    </div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">项目编号：</div>
                        <div class="input d_f a_i_c">{{ information.projectNo }}</div>
                    </div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">当前任务：</div>
                        <div class="input d_f a_i_c task">{{ information.nodeName }}</div>
                    </div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">产品名称：</div>
                        <div class="input d_f a_i_c">{{ information.productName }}</div>
                    </div>
                  
                    <!-- <div class="d_f a_i_c m_t_20">
                        <div class="label ">进件人：</div>
                        <div class="input d_f a_i_c">{{ information.submitter }}</div>
                    </div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">进件人电话：</div>
                        <div class="input d_f a_i_c">{{ information.submitterMobile }}</div>
                    </div> -->
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">业务部门：</div>
                        <div class="input d_f a_i_c">{{ information.deptName }}</div>
                    </div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">担保金额：</div>
                        <div class="input d_f a_i_c">{{ information.totalMoney }}</div>
                    </div>
                    <div class="d_f a_i_c m_t_20">
                        <div class="label ">贷款银行：</div>
                        <div class="input d_f a_i_c">{{ information.agencyName }}</div>
                    </div>
                </div>
                <singleStrokeFiling></singleStrokeFiling>
            </div>
            <div class="right" >
                <div class="d_f">
                    <div v-for="(item, index) in list" :key="index" class="tab d_f j_c_c a_i_c" @click="current = index"
                        :class="{ 'm_l_10': index > 0, 'active': current == index }">{{ item.name }} </div>
                </div>
                <div class="form">
                    <beforeInsurance v-if="current == 0"></beforeInsurance>
                    <businessInformation v-if="current == 1"></businessInformation>
                </div>
            </div>
        
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount } from 'vue'
import beforeInsurance from '../../../components/info/beforeInsurance.vue'//保前信息
import afterProtection from '../../../components/info/afterProtection.vue'//保后信息
import businessInformation from '../../../components//info/businessInformation.vue'//业务资料信息
import { businessCustomer } from '../../../api/agent'
import { useRoute } from 'vue-router'
import {noFinancingSingleDetailType} from '../../../type/service'
import singleStrokeFiling from '../../../components/info/singleStrokeFiling.vue'
export default defineComponent({
    name: '',
    components: {
        beforeInsurance,afterProtection,businessInformation,singleStrokeFiling
    },
    setup() {
        const data:noFinancingSingleDetailType = reactive({
            type: 1,
            information: {
                customerName: '',
                projectNo:'',
                nodeName:'',
                productName:'',
                agencyName:'',
                submitter:'',
                submitterMobile:'',
                deptName:'',
                totalMoney:'',
                customerStatus:0
            },
            list: [
                {
                    name: '项目信息',
                    id: '0',
                },
                {
                    name: '业务资料',
                    id: '1',
                },
            ],
            
            current: 0,
            nodeCategory: '1',
            productCategory:'1'
        })
        const route = useRoute()
        onBeforeMount(() => {
            data.nodeCategory = route.query.nodeCategory as string
            data.productCategory = route.query.productCategory as string
            methods.getData()
        })
        const methods = {
            getData() {
                businessCustomer({ id: route.query.flowInstId as string }).then((res: any) => {
                    if (res) {
                        data.information = res
                    }
                })
            },
        }
        return {
            ...toRefs(data), ...methods
        }

        return {
            ...toRefs(data),
        }
    }
})
</script>
<style scoped lang='scss'>
.index {
    width: 100%;
    height: calc(100% - 40px);
    margin-top: 10px;
}

.left {
    width: 370px;
    height: 100%;
    overflow-y: auto;

    .box {
        background: linear-gradient(178deg, #F5F9FF 0%, #FFFFFF 62%);
        box-sizing: border-box;
        border: 1px solid;
        border-image: linear-gradient(168deg, rgba(155, 188, 235, 0.5) 1%, rgba(102, 142, 197, 0) 94%) 1;
        border-radius: 6px;
        box-shadow: 5px 5px 5px -2px rgba(9, 20, 29, 0.03);
        width: 100%;
        padding: 15px;

        .label {
            text-align: right;
            width: 100px;
            color: rgba(0, 0, 0, 0.4);
            font-size: 14px;
            display: block !important;
        }

        .input {
            background: linear-gradient(178deg, #F5F9FF 0%, #FFFFFF 62%);
            width: calc(100% - 120px);
            height: 32px;
            border-radius: 2px;
            background: #fff;
            padding: 0px 12px;
            color: rgba(0, 0, 0, 0.9);
            font-size: 12px;
        }

        .task {
            color: #1878FF !important;
        }
    }
}

.right {
    width: calc(100% - 380px);
    height: 100%;
    margin-left: 30px;
    ;
    border-radius: 6px;

    .tab {
        width: 128px;
        height: 53px;
        border-radius: 6px 6px 0px 0px;
        background: linear-gradient(173deg, #FFFFFF 12%, #F3F3F3 60%);
        box-shadow: 5px 5px 5px -2px rgba(9, 20, 29, 0.03);
        color: #86909C;
        font-size: 16px;
        cursor: pointer;
    }

    .active {
        background: linear-gradient(173deg, #F5F9FF 10%, #FFFFFF 60%) !important;
        color: #1B5ED1 !important;
        box-shadow: 5px 0px 5px -2px rgba(9, 20, 29, 0.03) !important;
    }
    .form {
    width: calc(100% - 64px);
    height: calc(100% - 80px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    padding: 1px 32px 24px 32px;
    overflow-y: auto;
  }


}
</style>